<template>
  <view class="index-content">
    <Navbar :autoBack="true"
            title="设备详情" bgColor="#fff" :h5Show="false" :fixed="false"></Navbar>
    <view class="index-block base-info-top">
      <u-cell-group :title="'基本信息'" style="padding: 0 5px 10px 5px" :border="true">
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="12">
            <u-cell
                :title-style="fontSize"
                title="设备名称"
                :value="devInfo.name"
            ></u-cell>
          </u-col>
        </u-row>
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="12">
            <u-cell
                :title-style="fontSize"
                title="设备类型"
                :value="devInfo.type"
            ></u-cell>
          </u-col>
        </u-row>
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="12">
            <u-cell
                :title-style="fontSize"
                title="设备状态"
                :value="devInfo.status"
            ></u-cell>
          </u-col>
        </u-row>
      </u-cell-group>
    </view>

    <view class="index-block charts-content">
      <u-cell-group :title="'当天数据'" style="padding: 0 5px 5px 5px" :border="true" >
        <view class="u-demo-block__content">
          <u-row customStyle="margin-bottom: 10px">
            <u-col span="6">
              <u-row customStyle="margin-bottom: 10px">
                <u-col span="6">
                  <view class="demo-layout bg-purple-light">生产时长</view>
                  <u--text type="warning" :text="devInfo.runTime"></u--text>
                </u-col>
                <u-col span="6">
                  <view class="demo-layout bg-purple-light">待机时长</view>
                  <u--text type="warning" :text="devInfo.standbyTime"></u--text>
                </u-col>
              </u-row>
              <u-row customStyle="margin-bottom: 10px">

                <u-col span="6">
                  <view class="demo-layout bg-purple-light">报警时长</view>
                  <u--text type="warning" :text="devInfo.warnTime"></u--text>
                </u-col>
                <u-col span="6">
                  <view class="demo-layout bg-purple-light">关机时长</view>
                  <u--text type="warning" :text="devInfo.shutdownTime"></u--text>
                </u-col>
              </u-row>
            </u-col>
            <u-col span="6">
              <view class="charts-box">
                <qiun-data-charts
                    type="arcbar"
                    :opts="opts"
                    :chartData="chartData"
                />
              </view>
            </u-col>
          </u-row>
          <u-line></u-line>
          <u-row customStyle="margin-bottom: 10px">
            <view class="charts-box-line">
              <qiun-data-charts
                  type="line"
                  :opts="optsLine"
                  :chartData="chartLineData"
              />
            </view>
          </u-row>
        </view>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import { getDevLineData } from '../../api/device';
import { getDicts } from '../../utils/dict';

export default {
  components: {
    Navbar,
  },
  data() {
    return {
	  devInfo:{
		  number:null,
		  name:'',
		  status:null,
		  type:'',
		  runTime:'',
		  warnTime:'',
		  standbyTime:'',
		  shutdownTime:'',
	  },
      fontSizeFirst: {'font-size': '20rpx', 'color': 'white'},
      fontSize: {'font-size': '24rpx'},
      chartData: {
          series: [
            {
              name: "机器使用率",
              color: "#2fc25b",
              data: 0.8
            }
          ]
        },
      //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: [ "#ffa62b"],
        padding: undefined,
        title: {
          name: "80%",
          fontSize: 12,
          color: "#ffa62b"
        },
        subtitle: {
          name: "机器使用率",
          fontSize: 16,
          color: "#666666"
        },
        extra: {
          arcbar: {
            type: "circle",
            width: 12,
            backgroundColor: "#E9E9E9",
            startAngle: 1.5,
            endAngle: 0.25,
            gap: 2,
            centerColor:'#ffa62b'
          }
        }
      },

      chartLineData: {
          categories: [],
          series: [
            {
              name: "设备状态",
              data: []
            }
          ]
        },
      optsLine: {
        dataLabel:false,
        dataPointShape:false,
        color: ["#ffa62b"],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          labelCount:6, //x轴显示的数量
          rotateLabel:true,
          rotateAngle:-50, //旋转角度
          fontSize:7,
        },
        yAxis: {
          disableGrid: true,
          gridType: "dash",
          splitNumber:2,
          dashLength: 1,
          min:0,
          data:[{
            format:'yAxisDevice'
          }]
        },
        extra: {
          line: {
            type: "step",
            width: 2,
            activeType: "hollow"
          }
        }
      }
    }
  },
  onReady() {
    //this.getServerData();
    this.getServerLineData();
  },
  onLoad(option) {
	this.devInfo.name=option.name
	this.devInfo.number=option.number
	this.devInfo.status=option.status
	getDicts('device_cut_type').then((res)=>{
		res.data.map((item)=>{
			if(item.dictValue == option.type){
				this.devInfo.type = item.dictLabel
			}
		})
	})
	//this.devInfo.type=option.type
	this.devInfo.runTime=this.timeFormat(option.runTime)
	this.devInfo.warnTime=this.timeFormat(option.warnTime)
	this.devInfo.standbyTime=this.timeFormat(option.standbyTime)
	this.devInfo.shutdownTime=this.timeFormat(option.shutdownTime)

	this.opts.title.name = (option.runTime*100/(24*60*60)).toFixed(2) + '%'
	this.chartData.series[0].data = option.runTime/(24*60*60)
  },
  mounted() {

  },
  methods: {
	timeFormat(time){
		var h = Math.floor(time / 3600);
		var m = Math.floor((time % 3600) / 60);
		var hh =  h < 10 ? '0' + h : h;
		var mm =  m < 10 ? '0' + m : m;
		return hh+':'+mm+':00'
	},
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              name: "机器使用率",
              color: "#2fc25b",
              data: 0.8
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    getServerLineData() {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        // let res = {
        //   categories: [],
        //   series: [
        //     {
        //       name: "设备状态",
        //       data: []
        //     }
        //   ]
        // };
		getDevLineData(this.devInfo.number).then((res)=>{
			res.data.forEach((item)=>{
				this.chartLineData.categories.push(item.time)
				this.chartLineData.series[0].data.push(item.data.substr(0,1) == '1'? 0:(item.data.substr(3,1) == '1'?2:1))
			})
		})
        //this.chartLineData = JSON.parse(JSON.stringify(res));

    }
  }
}
</script>

<style lang="scss">
.index-content {
  background: linear-gradient(to bottom, #5599ff 30%, #ffffff 70%);
  min-height: 100vh;
}

.index-block {
  padding: 5px 20px 5px 20px;
  line-height: 32px;
  background: white;
  border: 1px solid #e9e9e9;
  font-size: 14px;
  border-radius: 12px;
}

.base-info-top {
  margin: 10px 5px 10px 5px;
}

.charts-content {
  margin: 10px 5px 10px 5px;
}



/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 150px;
  padding: 10px 10px 10px 10px;
}

/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box-line {
  padding: 30px 0 10px 0;
  width: 100%;
  height: 150px;
}
</style>
